<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <form action="" method="post">
        你爱好的运动？
        <input type="checkbox" id="checkedAllBox" />全选/全不选
        <br />

        <input type="checkbox" name="items" id="" value="足球" />足球
        <input type="checkbox" name="items" id="" value="篮球" />篮球
        <input type="checkbox" name="items" id="" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" id="" value="乒乓球" />乒乓球
        <br />
        <input type="button" name="" id="checkAllBtn" value="全  选" />
        <input type="button" name="" id="checkNoBtn" value="全不选" />
        <input type="button" name="" id="checkRevBtn" value="反  选" />
        <input type="button" name="" id="sendBtn" value="提  交" />
    </form>
</body>
<script type="text/javascript">
    //获取4个多选框 name获取
    var items = document.getElementsByName("items");
    //1.全选 #checkAllBtn
    var checkAllBtn = document.getElementById("checkAllBtn");
    checkAllBtn.onclick = function () {

        //遍历
        for (i = 0; i < items.length; i++) {
            //设置4个多选框为选中状态
            //alert(items[i].checked);
            items[i].checked = true;
        }
        checkedAllBox.checked = true;//吧全选/全不选也带上
    };
    //2.全不选 #checkNoBtn
    var checkNoBtn = document.getElementById("checkNoBtn");
    checkNoBtn.onclick = function () {

        for (i = 0; i < items.length; i++) {
            //设置4个多选框为选中状态
            //alert(items[i].checked);
            items[i].checked = false;
        }
        checkedAllBox.checked = false;//吧全选/全不选也带上
    };
    //3.反选 #checkRevBtn
    var checkRevBtn = document.getElementById("checkRevBtn");
    checkRevBtn.onclick = function () {

        for (i = 0; i < items.length; i++) {

            //alert(items[i].checked);
            //反选
            items[i].checked = !items[i].checked;
        }
        //反选对checkedAllBox也要有判断4个复选框是否全部选中效果，粘贴了下面那段
        //初始化checkedAllBox值，使4个复选框又全部选中时，checkedAllBox为选中
        checkedAllBox.checked = true;
        //判断4个复选框是否全部选中，只要一个没选中，就是没全部选中
        for (j = 0; j < items.length; j++) {
            //进入判断了，表示有一个或多个没选中了
            if (!items[j].checked) {
                checkedAllBox.checked = false;
                //一旦判断，即为全不选了，对j++后面的不用判断了，优化
                break;
            }
        }
    };
    //4.提交 #sendBtn
    var sendBtn = document.getElementById("sendBtn");
    sendBtn.onclick = function () {

        for (i = 0; i < items.length; i++) {
            if (items[i].checked) {
                //弹出value属性值
                alert(items[i].value);
            }
        }
    };
    //5.全选/全不选 #checkedAllBox
    var checkedAllBox = document.getElementById("checkedAllBox");
    checkedAllBox.onclick = function () {
        //alert("checkedAllBox");
        //使4个多选框的勾选与全选/全不选的相同
        for (i = 0; i < items.length; i++) {
            //使4个多选框的勾选与全选/全不选的相同
            items[i].checked = checkedAllBox.checked;
        }
    };
    //6.items
    /*
     * #checkedAllBox，与4个复选框同步，
     */
    //为4个复选框分别绑定单击函数，单击后#checkedAllBox改变
    for (i = 0; i < items.length; i++) {
        items[i].onclick = function () {
            //alert('hello');
            //初始化checkedAllBox值，使4个复选框又全部选中时，checkedAllBox为选中
            checkedAllBox.checked = true;
            //判断4个复选框是否全部选中，只要一个没选中，就是没全部选中
            for (j = 0; j < items.length; j++) {
                //进入判断了，表示有一个或多个没选中了
                if (!items[j].checked) {
                    checkedAllBox.checked = false;
                    //一旦判断，即为全不选了，对j++后面的不用判断了，优化
                    break;
                }
            }
        };
    }
</script>

</html>